<template>
    <view class="order-item">
		<view class="header">
			<view class="left"><text class="text">{{ item.createTime }}</text></view>
			<view class="right">{{ item.status | statusFilter}}</view>
		</view>
		<view class="center" v-for="(goodsItem, goodsIndex) in item.orderGoods">
			<image class="image" :src="goodsItem.goodsInfo.pic"></image>
			<view class="content">
				<view class="top">
					<view class="name">{{ goodsItem.goodsInfo.title }}</view>
					<view class="sku">默认</view>
<!-- 					<view class="sku">默认X{{ goodsItem.count }}</view> -->
				</view>
				<view class="amount-price">
					<text class="amount">共{{ item.goodsNum }}件商品</text>
					<text class="price">实付金额：<text class="symbol">¥<text class="text">{{ item.payPrice }}</text></text></text>
				</view>
				<!-- <view class="price">
					拼团价：<text class="symbol">¥<text class="text">{{ item.payPrice }}</text></text>
				</view> -->
			</view>
		</view>
		<!-- <view class="amount-price">
			<text class="amount">共{{ item.goodsNum }}件商品</text>
			<text class="price">实付金额：<text class="symbol">¥<text class="text">{{ item.payPrice }}</text></text></text>
		</view> -->
		<view class="footer">
			<button class="btn wl" @tap="logisDetail()" v-if="item.status === 2">查看物流</button>
			<button class="btn xq" @tap="orderDetail()">查看订单</button>
		</view>
	</view>
</template>

<script>
    export default {
        name: "OrderItem",
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
			}
		},
		methods: {
			logisDetail() {
				uni.navigateTo({
					url: '/pages/order/logis?no=' + this.item.expressNo
				})
			},
			orderDetail() {
				uni.navigateTo({
					url: '/pages/order/detail?orderId=' + this.item.id
				})
			}
		},
		filters: {
			statusFilter(val) {
				switch (val) {
					case 0:
						return '已关闭';
					case 1:
						return '待发货';
					case 2:
						return '待收货';
					case 3:
						return '已完成';
				}
			}
		}
    }
</script>

<style lang="scss" scoped>
.order-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 0 28rpx;
	.header {
		padding: 20rpx 0;
		font-size: 24rpx;
		@include flexBox(space-between, center);
		.left {
			@include flexBox(flex-start, center);
			border-left: 12rpx solid $main-color;
			line-height: 24rpx;
			.text {
				margin-left: 20rpx;
				color: #717076;
			}
		}
		.right {
			color: $main-color-text;
		}
	}
	.center {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EDEDED;
		@include flexBox(space-between);
		.image {
			width: 186rpx;
			height: 186rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
		}
		.content {
			flex: 1;
			height: 186rpx;
			overflow: auto;
			@include flexBox(space-between, null, column);
			.top {
				.name {
					font-size: 28rpx;
					color: #2B2C2E;
					@include ellipsis(2);
				}
				.sku {
					color: #979899;
					font-size: 24rpx;
					margin-top: 12rpx;
				}
			}
			.price {
				font-size: 24rpx;
				color: #9A9A9A;
			}
		}
	}
	.amount-price {
		font-size: 24rpx;
		color: #78797A;
		// padding: 20rpx 0;
		@include flexBox(flex-end);
		.price {
			margin-left: 20rpx;
			.symbol {
				color: $main-color-text;
				.text {
					font-size: 32rpx;
				}
			}
		}
	}
	.footer {
		width: 100%;
		padding: 18rpx 0;
		@include flexBox(flex-end);
		.btn {
			border-radius: 50rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			margin: 0;
			margin-left: 20rpx;
			&::after {
				border: none;
			}
			&.wl {
				border: 1rpx solid #CBCCCD;
				color: #5A5B5C;
				background: #fff;
			}
			&.sh, &.xq {
				border: 1rpx solid $main-color;
				color: #333333;
				background: $main-color;
			}
		}
	}
}
</style>